<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .span{
            color: red;
            font-size: 13px;
            padding-left: 14px;
        }
    </style>
    <script src="../js/jquery-3.4.1.min.js"></script>
    <script>
        $(function(){
            $("#phone").blur(function(){
                var phone = $(this).val();
                if(phone.length != 11){
                    $(this).next().addClass("span").text("请输入11位手机号！");
                    return false;
                }else if(phone[0] != 1){
                    $(this).next().addClass("span").text("手机号必须为1开头！");
                    return false;
                }
                $(this).next().addClass("span").text("√");
                return true;
            });

            $("#yzm").blur(function(){
                var yzm = $(this).val();
                if(yzm.length != 6){
                    $(this).next().addClass("span").text("验证码必须为6位！");
                    return false;
                }else if(isNaN(yzm)){
                    $(this).next().addClass("span").text("验证码必须为6位的数字！");
                    return false;
                }else if(yzm != "123456"){
                    $(this).next().addClass("span").text("验证码不正确！");
                    return false;
                }
                $(this).next().addClass("span").text("√");
                return true;
            });

        });
    </script>
</head>
<body>
<form action="form.html">
    <p>
        <label for="phone">手机号</label>
        <input type="text" name="phone" id="phone" placeholder="手机号" required>
        <span></span>
    </p>
    <p>
        <label for="yzm">验证码</label>
        <input type="text" name="yzm" id="yzm" placeholder="验证码" required>
        <span></span>
    </p>
    <p>
        <input type="submit" value="提交">
    </p>
</form>
</body>
</html>